<template>
  <div class="main-right">
    <div class="page-header-left-title">
      <h2>我的代办</h2>
    </div>
    <!--<el-table
        :data="tableData"
        :span-method="objectSpanMethod"
        style="width: 100%">
      <el-table-column
          prop="processName"
          label="流程名称"
          width="360">
      </el-table-column>
      <el-table-column
          prop="currentNodes"
          label="当前节点"
          width="180">
      </el-table-column>
      <el-table-column
          prop="initiator"
          label="发起人">
      </el-table-column>
      <el-table-column
          prop="standingTime"
          label="停留时间">
      </el-table-column>
      <el-table-column
          prop="orderId"
          label="单据号">
      </el-table-column>
      <el-table-column
          prop="flowType"
          label="流程类型">
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">详情</el-button>
        </template>
      </el-table-column>
    </el-table>-->
    <el-table
        :data="WHOLESALEPERFORMANCE111"
        :span-method="objectSpanMethod4"
        style="width: 100%">
      <el-table-column
          prop="ITEM"
          label="Item"
      >
      </el-table-column>
      <el-table-column
          prop="name"
          label="Model"
      >
      </el-table-column>
      <el-table-column label="202202">
        <el-table-column
            prop="amount1"
            label="O/S"
        >
        </el-table-column>
      </el-table-column>
      <el-table-column label="202203">
        <el-table-column
            prop="amount2"
            label="O/S"
        >
        </el-table-column>
      </el-table-column>
      <el-table-column label="202203">
        <el-table-column
            prop="amount3"
            label="O/S"
        >
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  name: "myagent",
  data() {
    return {
      /*tableData: [{
        processName: 'aaa',
        currentNodes: '审批',
        initiator: '某某',
        standingTime: '3小时50分钟',
        orderId: '2022-000016',
        flowType: '测试新增',
      }, {
        processName: 'aaa',
        currentNodes: '审批1',
        initiator: '某某',
        standingTime: '3小时50分钟',
        orderId: '2022-000016',
        flowType: '测试新增',
      }, {
        processName: 'aaa',
        currentNodes: '审批111',
        initiator: '某某',
        standingTime: '3小时50分钟',
        orderId: '2022-000016',
        flowType: '测试新增',
      }, {
        processName: '某某的测试2022-06-24 11:21:07',
        currentNodes: '11',
        initiator: '某某',
        standingTime: '3小时50分钟',
        orderId: '2022-000016',
        flowType: '测试新增',
      }]*/
      tableData2: [{
        ITEM: 'GAC-FCA',
        name: 'K4',
        amount1: '',
        amount2: '',
        amount3: ''
      }, {
        ITEM: 'GAC-FCA',
        name: 'K8',
        amount1: '',
        amount2: '',
        amount3: ''
      }, {
        ITEM: 'GAC-FCA',
        name: 'C553',
        amount1: '',
        amount2: '',
        amount3: ''
      }, {
        ITEM: 'GAC-FCA',
        name: 'B523',
        amount1: '',
        amount2: '',
        amount3: ''
      }, {
        ITEM: 'Chrysler',
        name: 'JL',
        amount1: '',
        amount2: '',
        amount3: ''
      }, {
        ITEM: 'Chrysler',
        name: 'WK',
        amount1: '',
        amount2: '',
        amount3: ''
      }, {
        ITEM: 'Chrysler',
        name: 'JT',
        amount1: '',
        amount2: '',
        amount3: ''
      }, {
        ITEM: 'Maserati',
        name: 'Maserati',
        amount1: '',
        amount2: '',
        amount3: ''
      }, {
        ITEM: 'Alfa Romeo',
        name: 'Alfa Romeo',
        amount1: '',
        amount2: '',
        amount3: ''
      }, {
        ITEM: 'Naveco',
        name: 'Naveco',
        amount1: '',
        amount2: '',
        amount3: ''
      }, {
        ITEM: 'McLaren',
        name: 'Sports',
        amount1: '',
        amount2: '',
        amount3: ''
      }, {
        ITEM: 'McLaren',
        name: 'Super',
        amount1: '',
        amount2: '',
        amount3: ''
      }, {
        ITEM: 'Total',
        name: 'Total',
        amount1: '',
        amount2: '',
        amount3: ''
      }],
      WHOLESALEPERFORMANCE111  : [{
        ITEM: 'Dealer 1',
        name: 'Wholesale Sales',
        amount1: 'GAC-FCA',
        amount2: '',
        amount3: '10%'
      }, {
        ITEM: 'Dealer 1',
        name: 'Wholesale Sales',
        amount1: 'Chrysler',
        amount2: '',
        amount3: '10%'
      }, {
        ITEM: 'Dealer 1',
        name: 'Wholesale Sales',
        amount1: 'Maserati',
        amount2: '',
        amount3: '10%'
      }, {
        ITEM: 'Dealer 2',
        name: 'Retail Sales',
        amount1: 'GAC-FCA',
        amount2: '',
        amount3: '10%'
      }, {
        ITEM: 'Dealer 2',
        name: 'Retail Sales',
        amount1: 'Chrysler',
        amount2: '',
        amount3: '10%'
      }, {
        ITEM: 'Dealer 2',
        name: 'Retail Sales',
        amount1: 'Maserati',
        amount2: '',
        amount3: '10%'
      }, {
        ITEM: 'Total',
        name: 'Wholesale Sales',
        amount1: 'GAC-FCA',
        amount2: '',
        amount3: '10%'
      }, {
        ITEM: 'Total',
        name: 'Wholesale Sales',
        amount1: 'Chrysler',
        amount2: '',
        amount3: '10%'
      }, {
        ITEM: 'Total',
        name: 'Wholesale Sales',
        amount1: 'Maserati',
        amount2: '',
        amount3: '10%'
      }, {
        ITEM: 'Total',
        name: 'Retail Sales',
        amount1: 'GAC-FCA',
        amount2: '',
        amount3: '10%'
      }, {
        ITEM: 'Total',
        name: 'Retail Sales',
        amount1: 'Chrysler',
        amount2: '',
        amount3: '10%'
      }, {
        ITEM: 'Total',
        name: 'Retail Sales',
        amount1: 'Maserati',
        amount2: '',
        amount3: '10%'
      }]
    }
  },methods: {
    arraySpanMethod({row, column, rowIndex, columnIndex}) {
      if (rowIndex % 2 === 0) {
        if (columnIndex === 0) {
          return [1, 2];
        } else if (columnIndex === 1) {
          return [0, 0];
        }
      }
    },

    objectSpanMethod4({row, column, rowIndex, columnIndex}) {
      //columnIndex 表示需要合并的列，多列时用 || 隔开
      if (columnIndex === 0 || columnIndex === 1||columnIndex === 4) {
        const _row = this.filterData(this.WHOLESALEPERFORMANCE111, columnIndex).one[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        /*if(this.tableData2[rowIndex].ITEM==this.tableData2[rowIndex].name){
          if(columnIndex == 0){
            return [1,2];
          }else if(columnIndex == 1) {
            return [0,0];
          }
        }*/
        return {
          rowspan: _row,
          colspan: _col,
        }
      }
    },
    filterData(arr, colIndex) {
      let spanOneArr = [];
      let concatOne = 0;
      arr.forEach((item, index) => {
        if (index == 0) {
          spanOneArr.push(1);
        } else {
          //class 和classify 分别表示表格数据第一列和第二列对应的参数字段，根据实际参数修改
          if (colIndex == 0) {
            if (item.ITEM === arr[index - 1].ITEM) {
              spanOneArr[concatOne] += 1;
              spanOneArr.push(0);
            } else {
              spanOneArr.push(1);
              concatOne = index;
            }
          }else if (colIndex == 4) {
            if (item.amount3 === arr[index - 1].amount3&&item.ITEM===arr[index - 1].ITEM) {
              spanOneArr[concatOne] += 1;
              spanOneArr.push(0);
            } else {
              spanOneArr.push(1);
              concatOne = index;
            }
          } else {
            if (item.name === arr[index - 1].name) {
              spanOneArr[concatOne] += 1;
              spanOneArr.push(0);
            } else {
              spanOneArr.push(1);
              concatOne = index;
            }
          }
        }
      });
      return {
        one: spanOneArr,
      };
    },
    /*rowspan(list , prop) {
      var spanArr = []
      var position = 0
      list.forEach((item, index) => {
        if (index === 0) {
          spanArr.push(1)
          position = 0
        } else {
          if (list[index][prop] === list[index - 1][prop]) {
            spanArr[position] += 1 //有相同项
            spanArr.push(0) // 名称相同后往数组里面加一项0
          } else {
            spanArr.push(1) //同列的前后两行单元格不相同
            position = index
          }
        }
      })
      return spanArr
    },

  },created(){
    this.tableData2 =  this.rowspan(this.tableData2 , 'name')
  }*/
  }


}
</script>
<style scoped>
.page-header-left-title{
  margin: 16px auto 8px;
}

.page-header-left-title>h2 {
  font-weight: 700;
  font-size: 16px;
  color: #111218;
  margin: 0;
}
.main-right {
  width: 100%;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  padding: 16px 0 24px 24px;
  background-color: #f1f2f6;
}
</style>
